<template>
  <MsHeader></MsHeader>
  <router-view v-slot="{ Component }">
    <!--    <keep-alive :include="state.includeList">-->
    <component :is="Component"/>
    <!--    </keep-alive>-->
  </router-view>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router'
import type { RouteType } from '@/router'
import MsHeader from "@/components/MsHeader.vue";

const state = reactive<{ includeList: string[] }>({
  includeList: []
})
const route = useRoute() as unknown as RouteType
watch(() => route, (newVal, oldVal) => {
  if (newVal.name) {
    if (newVal.meta.keepAlive && state.includeList.indexOf(newVal.name) === -1) {
      state.includeList.push(newVal.name);
    }
  }
}, { deep: true }) // 开启深度监听
</script>

<style>

/*通用样式*/
.ms-hidden {
  opacity: 0;
}

* {
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
}

ul {
  list-style: none;
}
</style>
